<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input
            placeholder="输入电影名进行搜索"
            v-model="query.filmName"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getFilmList"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="toAddFilm">添加影片</el-button>
        </el-col>
      </el-row>
      <!-- stripe隔行变色 -->
      <el-table :data="filmList" :border="true" stripe :resizable="false">
        <el-table-column
          type="index"
          fixed
          :resizable="false"
        ></el-table-column>
        <el-table-column label="海报" width="100" prop="filmPicture" fixed>
          <template v-slot="scope">
            <img
              style="width: 83px; height: 122px"
              :src="scope.row.filmPicture"
            />
          </template>
        </el-table-column>

        <el-table-column
          label="电影名"
          width="200"
          prop="filmName"
          fixed
          :resizable="false"
        ></el-table-column>

        <el-table-column
          label="类型"
          width="200"
          prop="categoryList"
          :resizable="false"
        >
          <template v-slot="scope">
            <el-tag
              size="mini"
              v-for="item in scope.row.categoryList"
              :key="item.cateNo"
              >{{ item.cateName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="地区"
          width="100"
          prop="area.fareaName"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="导演"
          width="200"
          prop="directorList"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="演员"
          width="200"
          prop="actorList"
          :resizable="false"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="50"
          prop="filmStatus"
          :resizable="false"
        ></el-table-column>
        <el-table-column label="评论">
          <template v-slot="scope">
            <router-link
              class="stills"
              :to="{
                path: '/evaluation',
                query: { id: scope.row.filmId, filmName: scope.row.filmName },
              }"
              >查看评论</router-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="270"
          :resizable="false"
          fixed="right"
        >
          <template v-slot="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-info"
              @click="showDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="editFilm(scope.row.filmId)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeFilmById(scope.row.filmId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, jumper,total,sizes"
        :total="total"
 
      >
      </el-pagination> -->
    </el-card>

    <!-- 影片详情抽屉 -->
    <el-drawer
      title="影片详情"
      v-model:visible="drawer"
      :direction="direction"
      class="detailForm"
    >
      <el-form label-position="left" label-width="80px" style="height: 800px">
        <el-form-item label-width="0">
          <img
            :src="filmDetail.filmPicture"
            style="width: 216px; height: 302px"
          />
        </el-form-item>
        <el-form-item label="影片名称">
          <span>{{ filmDetail.filmName }}</span>
        </el-form-item>
        <el-form-item label="英文名称">
          <span>{{ filmDetail.filmEnName }}</span>
        </el-form-item>
        <el-form-item label="影片时长">
          <span>{{ filmDetail.filmLength }}分钟</span>
        </el-form-item>
        <el-form-item label="影片状态">
          <span>{{ filmDetail.filmStatus }}</span>
        </el-form-item>
        <el-form-item label="评分">
          <span>{{ filmDetail.filmScore }}</span>
        </el-form-item>
        <el-form-item label="上映时间">
          <span>{{ filmDetail.filmShowTime }}</span>
        </el-form-item>
        <el-form-item label="年代">
          <span>{{ filmDetail.filmAge }}</span>
        </el-form-item>
        <el-form-item label="区域">
          <span>{{ filmDetail.area.fareaName }}</span>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filmList: [],
      addDialogVisible: false,

      addForm: {},
      editDialogVisible: false,
      editForm: {},
      total: 0,
      drawer: false,
      direction: "rtl",
      filmDetail: {
        area: {},
      },
      query: {
        filmName: "",
      },
    };
  },
  created() {
    this.getFilmList();
  },
  methods: {
    async getFilmList() {
      const { data: res } = await this.$http.post(
        "common/filminfo/getList",
        this.query
      );
      console.log(res);
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        var temp = res.data.value;
        console.log(temp);

        // for (const  in temp) {
        //
        //     for(const key2 in key.categoryList){
        //             cateArray.push(key2.cateName)
        //     }
        // }

        temp.forEach((element) => {
          var cateArray = [];
          var actorArray = [];
          var directorArray = [];
          element.categoryList.forEach((element2) => {
            cateArray.push(element2.cateName);
          });
          element.actorList.forEach((element2) => {
            actorArray.push(element2.actorName);
          });
          element.directorList.forEach((element2) => {
            directorArray.push(element2.directorName);
          });
          // element.categoryList = cateArray.join("、")
          element.actorList = actorArray.reverse().join("、");
          element.directorList = directorArray.reverse().join("、");
        });
        console.log(temp);
        // temp.categoryList.cateName
        this.filmList = temp;
        //   this.total = res.data.total
        //    var pageCount = Math.ceil(this.total / this.queryInfo.pagesize);
        //   if (this.queryInfo.pagenum > pageCount) {
        //     this.queryInfo.pagenum = pageCount;
        // this.getFilmList();
        //   }
      }
    },
    addDialogClose() {
      this.$refs.addFormRef.resetFields();
      this.$refs["addFormRef"].resetFields();
    },
    dateFormat(date) {
      alert(date);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      // 拼接
      return year + "-" + month + "-" + day;
    },
    async addUser() {
      const { data: res } = await this.$http.post(
        "/manager/manager/addManager",
        this.addForm
      );
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.addDialogVisible = false;
        this.getUserList();
      }
    },

    async showEditDialog(mid) {
      const { data: res } = await this.$http.get(
        "/manager/manager/getManagerById",
        { params: { id: mid } }
      );
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.editForm = res.data;
        this.editDialogVisible = true;
      }
    },
    async editUser() {
      const { data: res } = await this.$http.post(
        "/manager/manager/editManager",
        this.editForm
      );
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.editDialogVisible = false;
        this.getUserList();
      }
    },
    //删除用户
    async removeUserById(id) {
      const res = await this.$confirm("永久删除，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err); //点取消会报错，捕获
      if (res != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: result } = await this.$http.delete(
        `manager/manager/deleteManager/${id}`
      );
      if (result.code != 200) {
        return this.$message.error(result.message);
      }
      this.$message.success(result.message);
      this.getUserList();
    },
    //监听pageSize改变的事件
    handleSizeChange() {
      this.getUserList();
    },
    //监听页码改变的事件
    handleCurrentChange() {
      this.getUserList();
    },
    showDetail(data) {
      console.log(data);
      this.drawer = true;
      this.filmDetail = data;
    },
    toAddFilm() {
      this.$router.push("/addFilm");
    },
    editFilm(id) {
      this.$router.push("/addFilm?id=" + id);
    },
    async removeFilmById(id) {
      const res = await this.$confirm("永久删除，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err); //点取消会报错，捕获
      if (res != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: result } = await this.$http.delete(
        "filminfo/deleteFilmById",
        { params: { id: id } }
      );
      if (result.code != 200) {
        return this.$message.error(result.message);
      } else {
        this.getFilmList();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.detailForm label {
  width: 90px;
  color: #99a9bf;
}
.detailForm .el-form-item {
  margin-left: 20px;
  margin-right: 0;
  margin-bottom: 0;
}
.el-tag {
  margin-right: 5px;
}
.stills {
  text-decoration: none;
  color: rgb(11, 126, 126);
}
</style>
